<template>
	<div class="login-box">
		<div class="login-form">
			<h1>企业中后台管理系统</h1>
			<el-form
				show-message
        :model="userInfo"
				:rules="rules"
				center
				class="login-info"
			>
				<el-form-item prop="username">
					<el-input
						v-model="userInfo.username"
						type="text"
						:prefix-icon="User"
						placeholder="请输入用户名"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="userInfo.password"
						type="password"
						:prefix-icon="Lock"
						placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						style="width: 100%"
						@click="userLogin"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { User, Lock } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const router = useRouter();
const userInfo = reactive({
	username: "admin",
	password: "admin",
});
const rules = reactive({
	username: [
		{
			required: true,
			message: "请输入用户名",
			trigger: "blur",
		},
	],
	password: [
		{
			required: true,
			message: "请输入密码",
			trigger: "blur",
		},
	],
});

const route = useRoute(); // 获取当前路由信息

const userLogin = async () =>  {
  	await userStore.storeUserLogin(userInfo);
  
    // 检查 URL 中是否有 redirect 参数
    const redirectPath = route.query.redirect as string | undefined;
    // 优先跳转到 redirectPath，如果没有则跳转到首页
    router.push(redirectPath || "/");
 
}
</script>
<style lang="less" scoped>
.login-box {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 100vh;
	background: var(--dawei-backgroud-color);

	.login-form {
		display: flex;
		width: 300px;
		text-align: center;
		flex-direction: column;

		.login-info {
			height: max-content;
		}
	}
}
</style>
